<style>
#msg_res .msg img {
	max-width:300px;
	max-height:300px;
}
#cke_1_bottom {
	display:none;
}
</style>
{{if $q_id>0}}
<style>



</style>
{{/if}}
 {{include file="./ueditor.htm"}}

<link rel="stylesheet" type="text/css" href="{{$s_path}}/js/chat/css/style.css">

<div id="mscon">
  <div class="mscb">
    <div class="sleft">
      <div class="srbo">
        <div class="srtop"> <a href="#"></a> </div>
        <!--srtop end-->
        
        <div class="srdow">
          <div class="srtitle">{{$title}}</div>
          <div class="srspe">
            <div class="stimf">
              <div id="msg_res"> 
                {{foreach from=$chat item=list key=key}}
              
                {{if $list.type==2}}
                <div class="me chat_msg" id="{{$list.c_id}}" name="{{$list.user_name}}">
                 <!--<div class="time">
                <div class="em"></div>
                <span>10:12</span>
                <div class="em"></div>
              </div>-->
                  <div class="mesim"> <img src="{{$t_path}}/images/avater.jpg" class="pk_img"/> <span class="pk_title">{{$list.user_name}}</span> </div>
                  <!--yousim end-->
                  <div class="mesj"></div>
                  <div class="meinf"><span>{{$list.content}}</span></div>
                </div>
                {{else}}
                <div class="you chat_msg" id="{{$list.c_id}}" name="{{$list.user_name}}">
                  <div class="time">
                <div class="em"></div>
                <span>{{$list.add_time}}</span>
                <div class="em"></div>
              </div>
                  <div class="yousim"> <img src="{{$t_path}}/images/avater.jpg" class="pk_img"/> <span class="pk_title">{{$list.user_name}}</span> </div>
                  <!--yousim end-->
                  <div class="yousj"></div>
                  <div class="youinf">{{$list.content}} {{if $q_id}}<small onclick="chat.reply('{{$list.user_name}}')">回复</small>{{/if}}</div>
                </div>
               
                {{/if}}
                
                {{/foreach}} </div>
            </div>
            <!--absolute--> 
            
          </div>
          <!--srspe end--> 
          
          {{if $sess.user==$pd.id1.user_name || $sess.user==$pd.id2.user_name}}
          <div class="sreview">
        
            <textarea name="content" id="content"> </textarea>
        
           <script>
			window.UEDITOR_CONFIG.toolbars = [
					['emotion','insertimage']
					];
			
             var editor = UE.getEditor('content');
			</script> 
            <div class="texra"> <a class="fs fy_btn" onclick="chat.send('{{$type}}')" id="{{$sess.user}}_send">请发言</a> </div>
          </div>
          {{/if}} 
          <!--sreview end-->
          <div class="both"></div>
        </div>
        <!--srdow end--> 
        
      </div>
      <!--srbo end--> 
    </div>
    <!--sleft end-->
    
    
    <!--sright end--> 
    
  </div>
  <!--mscb end--> 
  
</div>

<script>
$(function(){
	
	
	chat.start();
	$("#msg_res img").click(function(){
		var ele = $(this);
		if(ele.width()>=40)
		{
			var src = ele.attr("src");
			var img = '<img src="'+src+'" width="600"/>';
			$.colorbox({html:img});	
		}
	});
})

/*
	在线聊天
*/
function Chat(){
	this.intval = 3000;
	this.t_time = 0;
	this.scroll_height = 100000;
	
}
//设置基本信息
Chat.prototype.setBasicInfo = function(){
	var lmd_pro = $(".lmd_pro");
	var msg_res = $("#msg_res")
	for(var i=0;i<lmd_pro.length;i++)
	{
		var ele = lmd_pro.eq(i);
		var name = ele.attr("name");
		var pk_title = ele.find(".pk_title").html();
		var pk_img = ele.find(".pk_img").attr("src");
		var div = msg_res.find("div[name="+name+"]");
		div.find(".pk_img").attr({"src":pk_img});
		div.find(".pk_title").html(pk_title);
	}
	
}
//发送信息
Chat.prototype.send = function(type){
	var data = new Object;

	data.user_name = '{{$user_info.user_name}}';
	data.user_id = '{{$user_info.user_id}}';
	data.q_id = '{{$q_id}}';
	
	data.content = editor.getContent();;
   
	data.type = type ? type : 0;
	
	if(data.content)
	{
		data = Main.json2String(data);
		editor.setContent('');;
		var da = 'act=chat_send&'+data;
		Main.AJAX("ajax.php",da);	
	}
}

//取得信息
Chat.prototype.start = function(){
	
	chat.t_time = setInterval("chat.getMsg()",this.intval);
}
//回复
Chat.prototype.reply = function(name){
	editor.setContent('{{$user_info.user_name}} 回复 '+name+':')
	
	//chat.t_time = setInterval("chat.getMsg()",this.intval);
}
Chat.prototype.getMsg = function(){
	var c_id1 = $(".chat_msg").last().attr("id");
	c_id1 = c_id1 ? c_id1 : 0;
	var c_id2 = $(".chat_msg2").last().attr("id");
	c_id2 = c_id2 ? c_id2 : 0;
	
	var c_id = (c_id1>c_id2) ? c_id1 : c_id2;
	var c_id = parseInt(c_id);
	var data = "act=chat_get&c_id="+c_id+"&pd_id={{$pd.pd_id}}&q_id={{$q_id}}";
	Main.AJAX("ajax.php",data,this.getMsgRes);
	
}

Chat.prototype.getMsgRes = function(res){
	
	var res = eval("("+res+")");
	var data = res.data;
	//var chat_stop = res.chat_stop
	//禁止用户发言
	//chat.userChatStop(chat_stop);
	
	if(data==false)
	{
		return false;
	}
	chat.setChatList(data);
	
	
	
	
}
//填充聊天列表
Chat.prototype.setChatList = function(data){
	var msg_res = $("#msg_res");
	
	if(data.type==2)
	{
		var html = ' <div class="me chat_msg" id="'+data.c_id+'" name="'+data.user_name+'"><div class="mesim"><img src="{{$t_path}}/images/avater.jpg" class="pk_img"/><span class="pk_title"></span></div><div class="mesj"></div> <div class="meinf"><span>'+data.content+'</span></div> </div>'	
	
	}
	else
	{
		var reply = '';
		if('{{$q_id}}')
		{
			var reply = '<small onclick="chat.reply(\''+data.user_name+'\')">回复</small>';
		}
		var html = ' <div class="you chat_msg" id="'+data.c_id+'" name="'+data.user_name+'"> <div class="yousim"><img src="{{$t_path}}/images/avater.jpg" class="pk_img"/><span class="pk_title"></span></div><div class="yousj"></div><div class="youinf">'+data.content+reply+'</div></div>'
	}
	var or_html = msg_res.html();
	var new_html = or_html+html;	
	msg_res.html(new_html);
	chat.setBasicInfo();
	//设置滚动条自动下滑
	$(".srspe").animate({scrollTop:chat.scroll_height});
}

Chat.prototype.setChatList2 = function(data){
	var msg_res = $("#msg_res2");
	var cla_name = (data.type==2) ? "red" : '';
	var html = '<div class="ota chat_msg2" id="'+data.c_id+'"><div class="otai"> <img src="{{$t_path}}/images/avater.jpg"/> </div><div class="otat"> <span class="'+cla_name+'">'+data.user_name+'</span><p>'+data.content+'</p></div><div class="otap"> <span>'+data.add_time+'</span> <a class="allt" onclick="chat.rightShow('+data.c_id+')"></a></div></div>';
	var or_html = msg_res.html();
	var new_html = or_html+html+'<div style="float:none;clear:both; height:0"></div>';	
	msg_res.html(new_html);
	
	//设置滚动条自动下滑
	$(".otabx").animate({scrollTop:chat.scroll_height});
	
}
//用户禁言
Chat.prototype.userChatStop = function(user){
	var btn = $("#"+sess_user+"_send");
	if(user==sess_user)
	{
		btn.html("您暂时不允许发言!请稍后...").css({"background":"#D52121",'color':"#fff"});
	}
	else
	{
		btn.html("请发言").css({"background":"#486CB4",'color':"#fff"});	
	}
	
}
Chat.prototype.chatStop = function(user_name){
	var data = "act=chat_stop&user_name="+user_name;
	Main.AJAX("ajax.php",data);
}
Chat.prototype.stop = function(){
	clearInterval(chat.t_time);
}
//展开右侧
Chat.prototype.rightShow = function(id){
	var obj = $("#"+id);
	
	if(!obj.attr("style"))
	{
		obj.css({"height":"auto"});
	}
	else
	{
		obj.attr({"style":""});	
	}
}
var chat = new Chat();
chat.setBasicInfo();


</script>